<template>
    <el-form :model="form" label-width="auto" style="max-width: 600px" :inline="true">
        <el-form-item label="请选择常数类别">
            <el-select
                    @change = "typeChange"
                    v-model="selectType"
                    placeholder="请选择常数类别..."
                    size="large"
                    style="width: 240px"
            >
                <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.constanttypename"
                        :value="item.id"
                />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="toAdd">添加</el-button>
        </el-form-item>
    </el-form>

    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="constanttypeid" label="常数类别ID" width="180"/>
            <el-table-column prop="constantcode" label="常数项编码" width="180"/>
            <el-table-column prop="constantname" label="常数项名称"/>
            <el-table-column label="操作">
                <template #default="solt">
                    <el-button link type="primary" size="small" @click="toEdit(solt.row)"> 编辑</el-button>
                    <el-button link type="primary" size="small" @click="toDelete(solt.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 添加表单 dialogFormVisible 表示是否显示，  boolean   -->
    <el-dialog v-model="editDialogFormVisible" title="添加常数项" width="500">
        <el-form :model="editForm" label-width="auto">
            <el-form-item label="常数类别ID">
                <el-input v-model="editForm.constanttypeid" disabled/>
            </el-form-item>
            <el-form-item label="常数项编码">
                <el-input v-model="editForm.constantcode"/>
            </el-form-item>
            <el-form-item label="常数项名称">
                <el-input v-model="editForm.constantname"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="save">保存</el-button>
                <el-button @click="editDialogFormVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import service from '@/utils/service';

let selectType = ref('');    // 常数类别列表用户选择的typeid
let options = ref([]);   // 常数类别列表
let form = ref({});
let editDialogFormVisible = ref(false);
let editForm = ref({});
let tableData = ref([]);

function onSubmit() {
    console.log("form", form.value);
}

function toAdd() {
    editForm.value = { constanttypeid: selectType.value };
    editDialogFormVisible.value = true;
}

function typeChange(a) {
    service.post("/constantitem/getbytypeid", { id: a }).then(
        res => {
            tableData.value = res.data;
        }
    );
}

function save() {
    if (editForm.value.id) {
        service.put('/constantitem/update', editForm.value).then(() => {
            editDialogFormVisible.value = false;
            typeChange(selectType.value);
        });
    } else {
        service.post('/constantitem/add', editForm.value).then(() => {
            editDialogFormVisible.value = false;
            typeChange(selectType.value);
        });
    }
}

function listData() {
    service.get("/constantitem/list").then(
        res => {
            tableData.value = res.data;
        }
    );
}

function toEdit(row) {
    editForm.value = { ...row };
    editDialogFormVisible.value = true;
}

function toDelete(id) {
    service.delete(`/constantitem/delete/${id}`).then(() => {
        typeChange(selectType.value);
    });
}

function loadOptions() {
    service.get("/constanttype/list").then(
        res => {
            options.value = res.data;
        }
    );
}

onMounted(() => {
    // 加载常数项所有数据
    listData();
    // 加载常数类别，提供给用户选择（下拉列别）
    loadOptions();
});
</script>